for...in 和 for...of 的区别

for-in

• 可以遍历对象和数组
• 遍历对象会将原形方法遍历出来，遍历数组是下标

function Animate() {
  this.name = "lihua";
  this.grade = "2";
}
Animate.prototype.getName = function () {
  this.course = "12423";
};
const cat = new Animate();

const obj = {
  a: "这是A",
  b: "这是B",
  c: "这是C",
};

const arr = ["a", "b", "c"];
// 遍历数组 - 下标
for (var i in arr) {
  console.log(i); // 0、1、 2
}
// 遍历对象 - 属性名
for (var i in obj) {
  console.log(i); // a、b、c
}
// 遍历实例 - 属性+原型链
for (var i in cat) {
  console.log(i); // name、grade、getName
}

for-of

• 普通对象不支持 of 遍历，因为 obj 不是一个可迭代对象
• 遍历数组是值

var arr = ["a", "b", "c"];

// 遍历数组, 具体值
for (var i of arr) {
  console.log(i); // a、b、c
}

延伸

写一个可迭代的对象

var obj = {
  index: -1,
  item: ["a", "b", "c"],
  [Symbol.iterator]: function () {
    return this;
  },
  next: function () {
    if (this.index < this.item.length - 1) {
      this.index += 1;
      return {
        done: false,
        value: this.item[this.index],
      };
    }

    return {
      done: true,
      value: this.item[this.index],
    };
  },
};

for (var i of obj) {
  console.log(i);
}

判断对象是否可迭代

const isIterator = (obj) => {
  return typeof obj[Symbol.iterator] === "function";
};

把对象变成可迭代的好处

• 统一接口：for of 遍历
• 简化遍历逻辑：不需要手动管理索引或使用 forEach
• 更好可组合性：可以直接把对象给 Array.form Set, 从而创建新的构造函数
• 更灵活数据结构：